<template>
  <div class="combined-list-container">
    <div class="fullscreen-button">
      <button @click="toggleFullscreen">
        {{ isFullscreen ? '退出全屏' : '进入全屏' }}
      </button>
    </div>
    <TopInfo />
    <div class="list-container">
      <div class="list-item">
        <InMaintenanceInfoList />
      </div>
      <div class="list-item">
        <MaintenanceWorkTaskList />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import InMaintenanceInfoList from './inMaintenance.vue';
import MaintenanceWorkTaskList from './maintenanceWorkTask.vue';
import TopInfo from './TopInfo.vue';

const isFullscreen = ref(false);

const toggleFullscreen = () => {
  const container = document.querySelector('.combined-list-container');
  if (isFullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (container?.requestFullscreen) {
      container.requestFullscreen();
    } else if (container?.webkitRequestFullscreen) {
      container.webkitRequestFullscreen();
    } else if (container?.msRequestFullscreen) {
      container.msRequestFullscreen();
    }
  }
  isFullscreen.value = !isFullscreen.value;
};
</script>

<style scoped lang="less">
.combined-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-image: url('/@/assets/twoHome/bgwave.png');
  position: relative;
  width: 100%;
  height: 100%;
}

.fullscreen-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.list-container {
  display: flex;
  gap: 10px;
  flex: 1;
}

.list-item {
  width: 49%;
}

/* 全屏时的样式 */
:fullscreen .combined-list-container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
}
</style>    